<template>

    <div id="app">
        <el-card>
            <!--
                        <el-row style="margin-top: 40px" :gutter="1">
                            <el-col :span="10">
                                <el-carousel style="margin-top: 1px;cursor: pointer;width: 40%;float: left" :interval="4000"
                                             arrow="always"
                                             height="380px">
                                    <el-carousel-item style="height: 380px;" v-for="(item, index) in data.imgs" :key="index">
                                        <el-image style=" height: 100%;width: 100%;" :src="item"></el-image>
                                    </el-carousel-item>
                                </el-carousel>

                            </el-col>
                            <el-col  :span="11">
                                <div style="">
                                    <h1 class="text" style="font-size: 22px;color: #4d4d4d;font-weight: bold;">{{data.title}}</h1>
                                    <h1 class="text" style="font-size: 15px;color: #4d4d4d;">活动类型:{{data.type}}</h1>
                                    <h1 class="text" style="font-size: 15px;color: #4d4d4d;">所属组织：{{data.tissue}}</h1>
                                    <h1 class="text" style="font-size: 15px;color: #4d4d4d;">截止报名时间：{{data.stoptime}}</h1>
                                    <h1 class="text" style="font-size: 15px;color: #4d4d4d;">招募人数：{{data.zmrs}}</h1>

                                    <el-row style="margin-top: 40px" :gutter="20">
                                        <el-col :span="4">
                                            <el-button type="primary">我要报名</el-button>
                                        </el-col>
                                        <el-col :span="4">
                                            <h1 style="font-size: 15px;color: #4d4d4d;">已报名人数：{{data.zmrs}}</h1>
                                        </el-col>
                                        <el-col :span="4">
                                            <el-button type="success" icon="el-icon-thumb">想参加：{{data.xcj}}</el-button>
                                        </el-col>
                                        &lt;!&ndash; <el-col :span="4">
                                             <h1 style="font-size: 15px;color: #4d4d4d;">已报名人数：{{data.xcj}}</h1>
                                         </el-col>&ndash;&gt;
                                    </el-row>
                                </div>
                            </el-col>
                        </el-row>
            -->


            <div style="width: 100%;display: block;height: 400px">
                <el-carousel style="margin-top: 1px;cursor: pointer;width: 40%;float: left" :interval="4000"
                             arrow="always"
                             height="380px">
                    <el-carousel-item style="height: 380px;" v-for="(item, index) in data.imgs" :key="index">
                        <el-image style=" height: 100%;width: 100%;" :src="item"></el-image>
                    </el-carousel-item>
                </el-carousel>

                <div style="float: right;text-align: left;width: 55%">
                    <h1 class="text" style="font-size: 22px;color: #4d4d4d;font-weight: bold;">{{data.title}}</h1>
                    <h1 class="text" style="font-size: 15px;color: #4d4d4d;">活动类型:{{data.type}}</h1>
                    <h1 class="text" style="font-size: 15px;color: #4d4d4d;">所属组织：{{data.tissue}}</h1>
                    <h1 class="text" style="font-size: 15px;color: #4d4d4d;">截止报名时间：{{data.stoptime}}</h1>
                    <h1 class="text" style="font-size: 15px;color: #4d4d4d;">招募人数：{{data.zmrs}}</h1>

                    <el-row style="margin-top: 40px" :gutter="1">
                        <el-col :span="4">
                            <el-button type="primary" @click="bm">我要报名</el-button>
                        </el-col>
                        <el-col :span="5">
                            <h1 style="font-size: 15px;color: #4d4d4d;">已报名人数：{{data.zmrs}}</h1>
                        </el-col>
                        <el-col :span="4">
                            <el-button type="success" icon="el-icon-thumb">想参加：{{data.xcj}}</el-button>
                        </el-col>
                        <!-- <el-col :span="4">
                             <h1 style="font-size: 15px;color: #4d4d4d;">已报名人数：{{data.xcj}}</h1>
                         </el-col>-->
                    </el-row>
                </div>
            </div>
            <div>
                <el-divider content-position="left"><span style="font-size: 20px;font-weight: bold">活动意义/内容</span>
                </el-divider>
                <div style="text-align: left;padding-left: 50px">
                    <h1 style="font-size: 15px;color: #4d4d4d;">{{data.hdyy}}</h1>
                </div>
                <div style="margin-top: 50px">
                    <el-divider content-position="left"><span style="font-size: 20px;font-weight: bold">活动安排</span>
                    </el-divider>
                </div>
                <div style="text-align: left;padding-left: 50px">
                    <h1 style="font-size: 15px;color: #4d4d4d;">活动时间：{{data.hdtime}}</h1>
                    <h1 style="font-size: 15px;color: #4d4d4d;">活动时长（小时）：{{data.time}}</h1>
                    <h1 style="font-size: 15px;color: #4d4d4d;">活动地址：{{data.address}}</h1>
                    <h1 style="font-size: 15px;color: #4d4d4d;">联系人：{{data.name}}</h1>
                    <h1 style="font-size: 15px;color: #4d4d4d;">联系电话：{{data.phone}}</h1>
                </div>

            </div>
        </el-card>
    </div>
</template>

<script>
    var t;
    export default {
        name: "ActivityInfo",
        data() {
            return {
                id: 1,
                data: {
                    id: 1,
                    imgs: [
                        'http://jmva.jiangmen.cn/upload/attachment/201/20200305162831_406.jpg',
                        'http://jmva.jiangmen.cn/upload/attachment/201/20200305162831_69.jpg',
                        'http://jmva.jiangmen.cn/upload/attachment/201/20200305162831_390.jpg',
                        'http://jmva.jiangmen.cn/upload/attachment/201/20200305162831_614.jpg',
                        'http://jmva.jiangmen.cn/upload/attachment/201/20200305162831_218.jpg',
                    ],
                    title: '慰问退休医生',
                    type: '公益',
                    tissue: '外联部',
                    zmrs: '777',
                    xcj: 666,
                    ybm: '666',
                    hdyy: '锻炼自己',
                    stoptime: '20000.05.22',
                    ctime: '1999.05.22',
                    hdtime: '1999.05.22',
                    time: '7',
                    phone: '10086',
                    address: '江门古井烧鹅店',
                    name: '大B哥',
                    //    hdtime: '1999.05.22',
                }
            }
        },
        created() {
            t = this;
            this.id = this.$route.query.id;

            //网络请求


        },
        mounted() {

        },
        methods: {
            bm() {
                // t.$message.success("报名成功！");
                t.$alert("报名成功！")
            },
        },
        beforeDestroy() {

        },
        props: {},
        computed: {//计算属性

        },
    }
</script>

<style scoped>


    .text {
        margin-top: 35px
    }
</style>
